<template>
  <div class="all-files">
    <content-pan-topbar></content-pan-topbar>
    <content-pan-table cur-table-img-type="folder" :table-data="tableData"></content-pan-table>

    <!-- 新建文件夹弹框 -->
    <el-dialog
      title="新建文件夹"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-input v-model="fileName" size="small" placeholder="请输入文件夹名称" @keyup.enter.native="confirmAdd"></el-input>
      <div style="text-align:center;margin-top: 20px;">
        <el-button type="primary" size="small" @click="confirmAdd">确定</el-button>
        <el-button type="default" size="small" @click="cancelAdd">取消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import ContentPanTopbar from '@/views/Content/ContentPan/component/ContentPanTopbar';
import ContentPanTable from '@/views/Content/ContentPan/component/ContentPanTable';
const tableData = require('./tableData/allFiles.json');

export default {
  name: 'AllFiles',
  components: { ContentPanTopbar, ContentPanTable },
  data() {
    return {
      tableData: tableData,
      dialogVisible: false,
      fileName: '',
    }
  },
  methods: {
    confirmAdd() {
      this.tableData.push({ fileName: this.fileName, fileSize: '', updateDate: new Date().getTime() });
      this.$message.success('添加成功');
      this.dialogVisible = false;
    },
    cancelAdd() {
      this.fileName = '';
      this.dialogVisible = false;
    }
  },
  mounted() {
    this.$bus.$on('tableTopBarClick', val => {
      if (val !== '新建') return;
      this.dialogVisible = true;
    });
  },
  beforeDestroy() {
    this.$bus.$off('tableTopBarClick');
  }
}
</script>

<style lang="less">
.all-files {
  height: calc(100% - 45px);
}
</style>